body {
background-color: #333;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 23rem;
background-color: #333;
overflow: hidden;
}
.wrapper::before {
background-color: #fff;
content: "";
position: absolute;
border-radius: 1rem;
height: 0.15rem;
left: 2rem;
right: 2rem;
bottom: 2rem;
}
.wrapper .ball {
background-color: #fff;
border-radius: 50%;
width: 3rem;
height: 3rem;
position: absolute;
animation: ballMovement 1.6s cubic-bezier(0, 0.98, 1, 0.99) infinite;
bottom: 2.1rem;
transform: translate(14rem, -15rem) scale(1.2, 0.5);
transform-origin: bottom;
}
@keyframes ballMovement {
0% {
transform: translate(14rem, -15rem);
}
15% {
transform: translate(7rem, 0rem) scale(1.2, 0.5);
}
30% {
transform: translate(2rem, -10rem) scale(1, 1);
}
45% {
transform: translate(-2rem, 0rem) scale(1.2, 0.8);
}
60% {
transform: translate(-5rem, -5.5rem) scale(1, 1);
}
75% {
transform: translate(-8rem, 0rem) scale(1.1, 0.9);
}
100% {
transform: translate(-14rem, -3rem) scale(1, 1);
}
}